<template>
	<view class="msg-main">
		<view class="uni-padding-wrap msg-pdd">
			<uni-segmented-control 
			:current="current" 
			:values="items" 
			v-on:clickItem="onClickItem" 
			:styleType="styleType" 
			:activeColor="activeColor"></uni-segmented-control>
		</view>
		<view class="content">
			<view v-show="current === 0">
				<view class="card-info">
					<block v-for="(item,index) in msgDataList" :key="index">
						<view class="card-info-item">
						<view class="card-info-left">
							<view class="card-info-left-title">补卡申请</view>
							<view class="card-info-left-desc">
								您于{{item.hr_attend_apply_data}}提交了{{item.hr_attend_typeCard}}补卡申请
							</view>
						</view>
						<view class="card-info-right">
							<view class="card-info-right-title" 
							:style="{
								'color':item.hr_attend_status == 1?'#0190a0':item.hr_attend_status==2?'red':'#4dc86f'
							}"
							>
								{{item.hr_attend_status == 1?'未审核':item.hr_attend_status==2?'已驳回':'已同意'}}
							</view>
						</view>
					</view>
					</block>
					<cmd-result-page v-if="msgDataList.length == 0"></cmd-result-page>
				</view>
			</view>
			<view v-show="current === 1">
				<view class="card-info">
					<cmd-result-page></cmd-result-page>
				</view>
			</view>
			<view v-show="current === 2">
				<view class="card-info">
					<cmd-result-page></cmd-result-page>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniSegmentedControl from '@/components/uni-segmented-control/uni-segmented-control.vue'
	import cmdResultPage from "@/components/cmd-result-page/cmd-result-page.vue"
	import uniCard from '@/components/uni-card/uni-card.vue'
	import {apigetcardInfo} from '@/common/api.js'
	import uniList from '@/components/uni-list/uni-list.vue'
	export default {
		name:"msg",
		components:{
			uniSegmentedControl,
			cmdResultPage,
			uniCard,
			uniList
		},
		data() {
			return {
				items: [
					'消息通知',
					'审批通知',
					'全体通知'
				],
				current: 0,
				activeColor: '#007aff',
				styleType: 'button',
				msgDataList:[]
			};
		},
		onPullDownRefresh(){
			setTimeout(()=>{
				this.getNotice()
			}, 1000);
		},
		onShow () {
			// uni.showLoading({
			// 	title: '数据加载中...',
			// 	mask: true
			// });
			this.getNotice()
		},
		methods:{
			onClickItem(index) {
				if (this.current !== index) {
					this.current = index;
				}
				switch(index){
					case 0:
						this.getNotice()
						break;
				}
			},
			getNotice(){
				apigetcardInfo().then(res=>{
					uni.hideLoading()
					uni.stopPullDownRefresh()//有下拉刷新会关闭下拉刷新
					if(!res.data.msg){
						this.msgDataList = res.data.data
					}
				}).catch(err=>{
					uni.hideLoading()
					uni.stopPullDownRefresh()//有下拉刷新会关闭下拉刷新
					this.toast('没有数据')
				})
			},
			toast(title,icon='none'){
				uni.showToast({
					title: title,
					mask: true,
					icon:icon,
					duration: 1500
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
.msg-main{
	height: 100vh;
	background-color: #fff;
}
 .card-info{
 	display: flex;
 	justify-content: center;
 	flex-wrap: wrap;
	width: 100%;
	height: 100%;
 	&-item{
 		width: 100%;
		display: flex;
		justify-content:space-between;
		border: 1px solid #ccc;
		margin: 30upx 20upx;
		padding: 20upx 20upx;
		border-radius: 8upx;
 	}
	&-left{
		width: 80%;
		&-title{
			font-size: 32upx;
			font-weight:bold;
		}
	}
	&-right{
		display: flex;
		align-items:center;
		justify-content:center;
		&-title{
			font-weight:700;
		}
	}
	
 }
 .msg-pdd{
	 padding-top: 30upx;
 }
</style>
